<template>
  <!-- 顶部导航栏 - 固定在页面顶部 -->
  <header class="header">
    <!-- 导航栏容器 - 限制最大宽度并居中 -->
    <div class="header-container">
      <!-- Logo区域 - 包含小红书Logo -->
      <div class="logo">
        <!-- 小红书Logo图片 - 使用相对路径引用assets中的图片 -->
        <img src="/src/assets/xiaohongshu.png" alt="小红书" class="logo-image" />
      </div>
      
      <!-- 搜索框区域 - 占据中间位置 -->
      <div class="search-container">
        <div class="search-box">
          <!-- 搜索图标 -->
          <img src="/src/assets/icons/search.png" alt="搜索" class="search-icon" />
          <!-- 搜索输入框 - 绑定到searchQuery响应式数据 -->
          <input 
            type="text" 
            placeholder="登录探索更多内容" 
            class="search-input"
            v-model="searchQuery"
          />
        </div>
      </div>
      
      
    </div>
  </header>
</template>

<script setup>

// 导入Vue的响应式API
import { ref } from 'vue'

// 搜索查询的响应式数据 - 用于双向绑定搜索框
// ref() 是Vue 3的响应式API，用于创建响应式的基本数据类型
const searchQuery = ref('')

</script>


<style scoped>

/* CSS -- 控制样式 */
/* 头部导航栏样式 */
.header {
  position: fixed;        /* 固定定位 */
  top: 0;                 /* 距离顶部0像素 */
  left: 0;                /* 距离左边0像素 */
  right: 0;               /* 距离右边0像素 */
  background: white;      /* 背景色为白色 */
  border-bottom: 1px solid #e8e8e8; /* 底部边框，颜色为浅灰色 */
  z-index: 1000;         /* 层级，确保在其他元素之上 */
  height: 60px;           /* 固定高度60像素 */
}

/* 头部容器样式 - 控制内容布局和最大宽度 */
.header-container {
  display: flex;          /* 使用flex布局，子元素水平排列 */
  align-items: center;    /* 垂直居中对齐 */
  justify-content: space-between; /* 两端对齐，Logo在左，操作区在右 */
  max-width: 1400px;      /* 最大宽度，防止在大屏幕上过度拉伸 */
  margin: 0 auto;         /* 水平居中 */
  padding: 0 20px;        /* 左右内边距 */
  height: 100%;           /* 高度占满父容器 */
}

/* Logo区域样式 */
.logo {
  display: flex;         /* 使用flex布局 */
  align-items: center;    /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
}

/* Logo图片样式 */
.logo-image {
  height: 35px;           /* 高度35像素 */
  width: auto;            /* 宽度自适应，保持比例 */
  object-fit: contain;    /* 保持图片比例，完整显示 */
  transition: all 0.3s ease; /* 过渡动画，所有属性变化0.3秒 */
  cursor: pointer;        /* 鼠标指针样式为手型 */
}

</style>